<template>
  <div class="content-wrapper">
    <div class="content-header">表格管理</div>
    <div class="content-container">
      <el-form :inline="true" :model="listQuery" class="filter-container">
        <el-form-item label="表格名称">
          <el-input type="text" size="mini" v-model="listQuery.name"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            class="filter-item"
            size="small"
            round
            type="primary"
            icon="el-icon-search"
          >
            搜索
          </el-button>
          <el-button
            class="filter-item"
            size="small"
            plain
            round
            icon="el-icon-upload2"
            @click="showUpload"
          >
            上传记录表格
          </el-button>
        </el-form-item>
      </el-form>
      <div>
        <el-table
          height="500"
          v-loading="listLoading"
          :data="pageList"
          highlight-current-row
          style="width: 100%"
        >
          <el-table-column label="表格名称" min-width="200">
            <template slot-scope="scope">
              <span style="cursor: pointer">{{ scope.row.documentName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="版本" prop="version" width="160px" />
          <el-table-column
            label="状态"
            prop="status"
            width="100px"
            :formatter="
              (row, column, cellValue, index) => {
                return cellValue == 0 ? '停用' : '启用'
              }
            "
          />
          <el-table-column label="上传时间" prop="createTime" width="160px" />
          <el-table-column
            label="操作"
            align="center"
            width="150px"
            fixed="right"
          >
            <template slot-scope="{ row }">
              <el-dropdown trigger="click" class="filter-item">
                <el-button type="text" class="el-icon-more" />
                <el-dropdown-menu slot="dropdown" class="user-dropdown">
                  <el-dropdown-item @click.native="view(row)"
                    >预览</el-dropdown-item
                  >
                  <el-dropdown-item @click.native="modifiCation(row)"
                    >修改</el-dropdown-item
                  >
                  <el-dropdown-item @click.native="assignModifiCation(row)"
                    >指派修改人</el-dropdown-item
                  >
                  <el-dropdown-item
                    @click.native="pushAppoint(row)"
                    v-if="row.status == 1"
                    >停用
                  </el-dropdown-item>
                  <el-dropdown-item
                    @click.native="pushAppoint(row)"
                    v-if="row.status == 0"
                    >启用
                  </el-dropdown-item>
                  <el-dropdown-item divided @click.native="pushDelete(row)"
                    >删除</el-dropdown-item
                  >
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <pagination
        v-show="total > 0"
        :total="total"
        :page-number.sync="listQuery.pageNumber"
        :page-size.sync="listQuery.pageSize"
        @pagination="getList"
      />
    </div>
    <Create
      :dialogVisible="dialogVisibleCreate"
      v-on:pageDataReload="pageDataReload"
    ></Create>
    <el-dialog
      title="指派修改人"
      :visible.sync="dialogVisibleAssign"
      width="30%"
    >
      <el-cascader
        ref="cascader"
        v-model="optionsdata"
        :options="options"
        :props="optionProps"
        :show-all-levels="false"
        @change="getCheckedNodes"
      ></el-cascader>
      <!-- <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogVisible = false">确 定</el-button> -->
    </el-dialog>
  </div>
</template>
<script>
import Pagination from '@/components/Pagination'
import Create from '@/views/record/components/create.vue'
import {
  page,
  pushAppoint,
  pushDelete,
  deleted,
  Designate
} from '@/api/rs/record_template'
import { getsearch } from '@/api/uc/search.js'

export default {
  components: {
    Pagination,
    Create
  },
  data() {
    return {
      listLoading: false,
      pageList: [],
      total: 0,
      listQuery: {
        pageNumber: 1,
        pageIndex: 0,
        pageSize: 10
      },
      dialogVisibleCreate: undefined,
      dialogVisibleAssign: false,
      options: [],
      optionsdata: [],
      optionProps: {
        value: 'id',
        label: 'label',
        children: 'children'
      },
      cascader: [],
      recordTemplateId:''
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    view(row) {
      window.open(
        'onlyoffice/createDocument.html?&token=' +
          this.$store.getters.token +
          '&documentId=' +
          row.documentId +
          '&mode=view' + '&urldata=' + process.env.VUE_APP_BASE_API
      )
    },
    enable(row) {
      console.log(row)
    },
    deleted(row) {
      deleted({ recordTemplateId: row.recordTemplateId }).then((res) => {
        this.$message.success('删除成功！')
        this.getList()
      })
    },

    pageDataReload() {
      this.getList()
    },
    getList() {
      //   this.listLoading = true
      this.listQuery.pageIndex = this.listQuery.pageNumber - 1
      page(this.listQuery).then((res) => {
        this.pageList = res.data.rows
        this.total = res.data.total
      })
    },

    // 上传
    showUpload() {
      this.dialogVisibleCreate = {
        dialogVisible: true,
        label: '添加',
        sort: '1'
      }
    },
    //修改
    modifiCation(row) {
      this.dialogVisibleCreate = {
        dialogVisible: true,
        label: '修改',
        sort: '2',
        recordTemplateId: row.recordTemplateId
      }
    },
    // 启用
    async pushAppoint(row) {
      let status = ''
      if (row.status === 1) {
        status = 0
      } else if (row.status === 0) {
        status = 1
      }
      const data = await pushAppoint({
        recordTemplateId: row.recordTemplateId,
        status: status
      })
      this.getList()
    },
    // 删除
    async pushDelete(row) {
      // console.log(row,'row3');
      let data = await pushDelete({ recordTemplateId: row.recordTemplateId })
      this.getList()
    },
    // 指派修改人
    async assignModifiCation(row) {
      this.dialogVisibleAssign = true
      // 获取人员
      let data = await getsearch()
      this.options = data.data.groupUserTree
      this.recordTemplateId=row.recordTemplateId
    },
    getCheckedNodes(res) {
      console.log(res)
      let data = this.$refs['cascader'].getCheckedNodes()
      let updateUserId =data[0].value
      Designate({
        recordTemplateId: this.recordTemplateId,
        updateUserId: updateUserId
      }).then((res) => {
        if(res.code==1){
               this.dialogVisibleAssign = false
        }
         
      })
    }
  }
}
</script>
